<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="UTF-8">
  <title>Datetime - Basic</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
  <link href="../../../../../css/ionic.bundle.css" rel="stylesheet">
  <link href="../../../../../scripts/testing/styles.css" rel="stylesheet">
  <script src="../../../../../scripts/testing/scripts.js"></script>
  <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
  <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script></head>

<body>
  <ion-app>

    <ion-header>
      <ion-toolbar>
        <ion-title>Datetime - Basic</ion-title>
        <ion-buttons slot="primary">
          <ion-button onclick="toggleBoolean('dynamicDisabled', 'disabled')">
            (disabled)
          </ion-button>
        </ion-buttons>
      </ion-toolbar>
    </ion-header>

    <ion-content id="content" class="outer-content test-content">
      <ion-list>
        <ion-item>
          <ion-label>Default</ion-label>
          <ion-datetime></ion-datetime>
        </ion-item>

        <ion-item>
          <ion-label position="floating">Default with floating label</ion-label>
          <ion-datetime></ion-datetime>
        </ion-item>

        <ion-item>
          <ion-label position="floating">Placeholder with floating label</ion-label>
          <ion-datetime id="datetime-part" placeholder="Select a date"></ion-datetime>
        </ion-item>

        <ion-item>
          <ion-label>Max</ion-label>
          <ion-datetime max="2018-07-29"></ion-datetime>
        </ion-item>

        <ion-item>
          <ion-label>MMMM</ion-label>
          <ion-datetime display-format="MMMM" value="2012-12-15T13:47:20.789"></ion-datetime>
        </ion-item>

        <ion-item>
          <ion-label position="floating">MM DD YY</ion-label>
          <ion-datetime display-format="MM DD YY" placeholder="Select Date"></ion-datetime>
        </ion-item>

        <ion-item>
          <ion-label>Disabled</ion-label>
          <ion-datetime id="dynamicDisabled" display-format="MM DD YY" disabled value="1994-12-15"></ion-datetime>
        </ion-item>

        <ion-item>
          <ion-label>YYYY</ion-label>
          <ion-datetime id="customPickerOptions" placeholder="Custom Options" display-format="YYYY" min="1981" max="2002" value="2000"></ion-datetime>
        </ion-item>

        <ion-item>
          <ion-label>Multiple</ion-label>
          <ion-datetime value="1994-12-24" display-format="YYYY" placeholder="year"></ion-datetime>
          <ion-datetime value="1994-12-24" display-format="MM" placeholder="month"></ion-datetime>
          <ion-datetime value="1994-12-24" display-format="DD" placeholder="day"></ion-datetime>
        </ion-item>

        <ion-item>
          <ion-label position="stacked">MMMM YY</ion-label>
          <ion-datetime display-format="MMMM YY" min="1989-06-04" max="2004-08-23" value="1994-12-15T13:47:20.789"></ion-datetime>
        </ion-item>

        <ion-item>
          <ion-label position="floating">MM/DD/YYYY</ion-label>
          <ion-datetime display-format="MM/DD/YYYY" min="1994-03-14" max="2012-12-09" value="2002-09-23T15:03:46.789" class="e2eOpenMMDDYYYY"></ion-datetime>
        </ion-item>

        <ion-item>
          <ion-label position="floating">MM/DD/YYYY</ion-label>
          <ion-datetime display-format="MM/DD/YYYY" min="1994-03-14" max="2012-12-09" class="e2eOpenMMDDYYYY"></ion-datetime>
        </ion-item>

        <ion-item>
          <ion-label>DDD. MMM DD, YY (custom locale)</ion-label>
          <ion-datetime id="customDayShortNames" value="1995-04-15" min="1990-02" max="2000" display-format="DDD. MMM DD, YY" month-short-names="jan, feb, mar, apr, mai, jun, jul, aug, sep, okt, nov, des"></ion-datetime>
        </ion-item>

        <ion-item>
          <ion-label>DDD. MMM DD, YY (English/French switch)</ion-label>
          <ion-datetime id="customMonthShortNames" value="1995-04-15" min="1990-02" max="2000"
            display-format="DDD. MMM DD, YY"></ion-datetime>
          <ion-button slot="end" onclick="toggleLanguage()">Language Selected: <span id="selectedLang">en</span>
          </ion-button>
        </ion-item>

        <ion-item>
          <ion-label>D MMM YYYY H:mm</ion-label>
          <ion-datetime display-format="D MMM YYYY H:mm" min="1997" max="2010" value="2005-06-17T11:06Z"></ion-datetime>
        </ion-item>

        <ion-item>
          <ion-label>DDDD MMM D, YYYY</ion-label>
          <ion-datetime display-format="DDDD MMM D, YYYY" min="2005" max="2016" value="2008-09-02"></ion-datetime>
        </ion-item>

        <ion-item>
          <ion-label>HH:mm A</ion-label>
          <ion-datetime display-format="HH:mm A"></ion-datetime>
        </ion-item>

        <ion-item>
          <ion-label>HH:mm (initial value 00:00)</ion-label>
          <ion-datetime display-format="HH:mm" value="00:00"></ion-datetime>
        </ion-item>

        <ion-item>
          <ion-label>h:mm a</ion-label>
          <ion-datetime display-format="h:mm a" value="01:47"></ion-datetime>
        </ion-item>

        <ion-item>
          <ion-label>h:mm A</ion-label>
          <ion-datetime display-format="h:mm A" value="14:23"></ion-datetime>
        </ion-item>

        <ion-item>
          <ion-label>hh:mm A (15 min steps)</ion-label>
          <ion-datetime display-format="h:mm A" minute-values="0,15,30,45"></ion-datetime>
        </ion-item>

        <ion-item>
          <ion-label>YYYY MMM DD hh:mm A</ion-label>
          <ion-datetime
            id="todaysDate"
            display-format="YYYY MMM DD hh:mm A"
            minute-values="00,05,10,15,20,25,30,35,40,45,50,55">
          </ion-datetime>
        </ion-item>

        <ion-item>
          <ion-label>Leap years, summer months</ion-label>
          <ion-datetime id="customYearValues" display-format="MM/YYYY" pickerFormat="MMMM YYYY" month-values="6,7,8"></ion-datetime>
        </ion-item>

        <ion-item>
          <ion-label>Specific days/months/years</ion-label>
          <ion-datetime month-values="6,7,8" year-values="2014,2015" day-values="01,02,03,04,05,06,08,09,10, 11, 12, 13, 14" display-format="DD/MMM/YYYY"></ion-datetime>
        </ion-item>
      </ion-list>

      <ion-list>
        <ion-item>
          <ion-label>myDate</ion-label>
          <ion-datetime display-format="MMM DD, YYYY HH:mm"></ion-datetime>
        </ion-item>
      </ion-list>

      <ion-list>
        <ion-item>
          <ion-label>Display UTC 00:00 in Local Timezone (default behavior)</ion-label>
          <ion-datetime display-format="MMM DD, YYYY HH:mm" value="2020-01-01T00:00:00Z"></ion-datetime>
        </ion-item>

        <ion-item>
          <ion-label>Display UTC 00:00 in UTC (display-timezone = 'utc')</ion-label>
          <ion-datetime display-format="MMM DD, YYYY HH:mm" value="2020-01-01T00:00:00Z" display-timezone="utc"></ion-datetime>
        </ion-item>

        <ion-item>
          <ion-label>Display UTC 00:00 in US Pacific Time (display-timezone = 'America/Los_Angeles')</ion-label>
          <ion-datetime display-format="MMM DD, YYYY HH:mm" value="2020-01-01T00:00:00Z" display-timezone="America/Los_Angeles"></ion-datetime>
        </ion-item>
      </ion-list>

      <ion-list>
        <ion-item>
          <ion-label>HH:mm:ss</ion-label>
          <ion-datetime display-format="HH:mm:ss"></ion-datetime>
        </ion-item>

        <ion-item>
          <ion-label>No display-format</ion-label>
          <ion-datetime></ion-datetime>
        </ion-item>

      </ion-list>

    </ion-content>

    <style>
      .outer-content {
        --background: #f2f2f2;
      }

      ion-datetime#datetime-part::part(placeholder) {
        color: rgba(255, 0, 0, 0.5);
      }

      ion-datetime#datetime-part::part(text) {
        color: green;
      }
    </style>

    <script>
      var todaysDateDatetime = document.querySelector('#todaysDate');
      todaysDateDatetime.value = '2020-09-02T17:15:03.488Z';

      var yearValuesArray = [2020, 2016, 2008, 2004, 2000, 1996];
      var customYearValues = document.getElementById('customYearValues');
      customYearValues.yearValues = yearValuesArray;

      var dayShortNamesArray = [
        's\u00f8n',
        'man',
        'tir',
        'ons',
        'tor',
        'fre',
        'l\u00f8r'
      ];
      var customDayShortNames = document.getElementById('customDayShortNames');
      customDayShortNames.dayShortNames = dayShortNamesArray;

      var customPickerButtons = {
        buttons: [{
          text: 'Save',
          handler: () => console.log('Clicked Save!')
        }, {
          text: 'Log',
          handler: () => {
            console.log('Clicked Log. Don\'t Dismiss.');
            return false;
          }
        }]
      }
      var customPickerOptions = document.getElementById('customPickerOptions');
      customPickerOptions.pickerOptions = customPickerButtons;

      function toggleBoolean(id, prop) {
        var el = document.getElementById(id);

        var isTrue = el[prop] ? false : true;
        el[prop] = isTrue;
        console.log('in toggleBoolean, setting', prop, 'to', isTrue);
      }

      var monthShortNamesEnglish = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
      var monthShortNamesFrench = ["jan", "fév", "mar", "avr", "mai", "jui", "jui", "aou", "sep", "oct", "nov", "déc"];

      var selectedLang = "en";
      var customDayShortNames = document.getElementById('customMonthShortNames');
      customDayShortNames.monthShortNames = monthShortNamesEnglish;

      function toggleLanguage() {
        selectedLang = selectedLang === 'en' ? 'fr' : 'en';

        var customMonthShortNames = document.getElementById('customMonthShortNames');
        var el = document.getElementById('selectedLang');

        el.innerText = selectedLang;
        if (selectedLang === 'en') { customMonthShortNames.monthShortNames = monthShortNamesEnglish; }
        else { customMonthShortNames.monthShortNames = monthShortNamesFrench; }
      }
    </script>
  </ion-app>
</body>

</html>
